<template>
    <div class="box-content">
        <div class="navigation">用户管理/用户控制</div>
        <div class="mt-3" style="padding-left: 10px">
            <div>1、 LOGO设置 <span style="font-size: 12px">(点击即可上传并且更换logo，png/jpg格式)</span></div>
            <div style="margin: 20px 0 20px 40px">
                <el-upload
                        v-loading="loadingDialig"
                        element-loading-text="拼命上传中"
                        class="avatar-uploader"
                        :show-file-list="false"
                        :action="$store.state.uploadUrlPic"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
                </el-upload>
            </div>
            <div>2、 时间设置<span style="font-size: 12px">(只能为正整数)</span></div>
            <div style="margin: 20px 0 20px 40px">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item  prop="num">
                        <el-input type="num" v-model="form.num" placeholder="请输入最大子账号数量" style="width: 450px;"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" :loading="loadingSet" @click="submitCostomer('form')">{{loadingSet?'设置中':'设置'}}</el-button>
            </div>

        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "customer-control",
        data(){
            var maxCountValid = (rule, value, callback) => {
                let reg = /^[1-9]\d*$/;
                if (!value) {
                    callback(new Error('请输入时间数值'))
                }
                if (!reg.test(value)) {
                    callback(new Error('请输入正整数'))
                }
                callback()
            };
            return {
                loadingSet: false,
                imageUrl:'',
                loadingDialig:false,
                form: {
                    num: 30
                },
                rules: {
                    num: [
                        { validator: maxCountValid, trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            beforeAvatarUpload (file) {
                var fileName=new Array()
                fileName =file.name.split('.');
                const extension = fileName[fileName.length-1] === 'jpeg'
                const extension2 =  fileName[fileName.length-1]=== 'png'
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传模板只能是jpeg、png格式!',
                        type: 'warning'
                    });
                }
                if (extension || extension2) {
                    let fd = new FormData()
                    fd.append('fileUpload', file)
                    this.newImport(fd);
                }
                return false;
            },
            newImport (data) {
                let config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization' : 'Bearer' + localStorage.getItem('token')
                    }
                };
                this.loadingDialig = true;
                axios.post(process.env.VUE_APP_API_HOST + 'api/upload/pics', data,config)
                    .then((res) => {
                        this.imageUrl = res.data.data.path;
                        this.postImg(res.data.data.path);
                        this.loadingDialig = false;
                    })
                    .catch((err) => {
                        this.loadingDialig = false;
                        this.$message.warning(err.response.data.msg || "数据异常，请重试");
                    })
            },
            submitCostomer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.setDate();
                    } else {
                        return false;
                    }
                });
            },
            setDate(){
                let params = {
                    pic_url: this.form.num,
                };
                this.loadingSet = true;
                this.$http.put('api/admin/system/setting/2',params)
                    .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    during: 1000
                                })
                            }
                        this.loadingSet = false;
                    })
                    .catch((err) => {
                        this.loadingSet = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            postImg(url) {
                let params = {
                    pic_url: url
                };
                this.$http.put('api/admin/system/setting/1',params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: res.msg,
                                type: 'success',
                                during: 1000
                            })
                        }
                        localStorage.setItem('logoUrl',res.data.pic_url);
                        this.$store.commit('setLogoUrl',res.data.pic_url);
                        var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
                        link.type = 'image/x-icon';
                        link.rel = 'shortcut icon';
                        link.href = res.data.pic_url;
                        document.getElementsByTagName('head')[0].appendChild(link);
                    })
                    .catch((err) => {
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            }
        }
    }
</script>

<style lang="less">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>